<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>保险超级课堂</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				<a href="insuranceClass.html">
					<el-button type="text" icon="el-icon-arrow-left">返回</el-button>
				</a>
			</div>
			<div class="pd10">		
				<el-form ref="form" :model="form" label-width="120px">
				  <el-form-item label="标题：">
				    <el-input type="text" v-model="form.name" style="width:300px;"></el-input>
				  </el-form-item>
				  <el-form-item label="展示图片：" >
				  	<el-upload class="avatar-uploader" :action="ImgApiMore" :show-file-list="false" :on-success="handleAvatarSuccess">
				  		<img v-if="pic" :src="pic" class="avatar">
				  		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				  	</el-upload>
				  </el-form-item>
				  <el-form-item label="类别：" >
				  	<el-select v-model="form.category" placeholder="类别">
				  		<el-option :label="item.label" :value="item.value" v-for="item in categoryArr" :key="item.label"></el-option>
				  	</el-select>
				  </el-form-item>
				  <el-form-item>
				    <el-button class="exitbtn" type="primary" @click="onSubmit">保存</el-button>
				  </el-form-item>
				</el-form>
			</div>
		</div>
	</body>
	<script src="/jeefast/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/js/axios.js"></script>
	<script src="/jeefast/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					id:"",					
					ImgbaseUrl: ImgbaseUrl,
					ImgApiMore: uploadPic,
					pic:"",
					categoryArr:[{
						value: '1',
						label: '小白入门'
					},{
						value: '2',
						label: '防坑指南'
					},{
						value: '3',
						label: '重疾病专题'
					},{
						value: '3',
						label: '寿险专题'
					},{
						value: '3',
						label: '医疗险专题'
					},{
						value: '3',
						label: '意外险专题'
					}],
					form:{
						name:"",
						pic:"",
						category:""
					}
				}
			},
			methods: {
				/* 单张上传图片 */
				handleAvatarSuccess: function(res, file) {
					this.pic = URL.createObjectURL(file.raw);
					this.form.pic = file.name;
				},
				// 确定
				IsNull: function() {
					let flag = false;
					if (this.form.name == "") {
						this.$message.error('标题不能为空');
						return flag = true;
					}
					if (this.form.pic == "") {
						this.$message.error('展示图片不能为空');
						return flag = true;
					}
					if (this.form.category == "") {
						this.$message.error('类别不能为空');
						return flag = true;
					}
				},
				onSubmit:function(){
					let that = this;
					if (that.IsNull()) {
						return;
					}
					console.log('===',this.form)
					window.location.href = 'insuranceClass.html';//此处拼接内容
				},
			},
			created() {
				this.id = getQueryString("id");
				if(this.id == null){
					console.log('==添加')
				}else{
					console.log('==编辑')
				}
			},
		});
	</script>
</html>
